import React, { FC, useState } from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom';
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import { history } from 'umi';
import './index.less';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

const Bottom: FC = () => {
  const history = useHistory();
  const location = useLocation();
  const { pathname } = location;

  const setRouteActive = (value: string) => {
    history.push(value);
  };

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/xl2',
      title: '待办',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/xl3',
      title: '消息',
      icon: <MessageOutline />,
    },
    {
      key: '/xl4',
      title: '我的',
      icon: <UserOutline />,
    },
  ];

  return (
    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  );
};

export default (props: any) => {
  let [state, getstate] = useState({ sleyf: 'dg' });
  return (
    <div className="app">
      <div className="body">
        {/* 路由动画功能实现 */}
        <TransitionGroup style={{ height: '100%' }}>
          <CSSTransition
            timeout={1000}
            classNames={state.sleyf}
            unmountOnExit
            key={props.location.pathname}
          >
            {props.children}
          </CSSTransition>
        </TransitionGroup>
      </div>
      <div className="bottom">
        <Bottom />
      </div>
    </div>
  );
};
